import React, {Component} from "react";
import Videojs from "video.js";
import "video.js/dist/video-js.css";

//import "videojs-contrib-hls";

class VideoPlayer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            src: this.props.src,

        }
    }

    componentWillUnmount() {
        // 销毁播放器
        if (this.player) {
            this.player.dispose();
        }
    }

    componentDidMount() {
        const {src} = this.state
        setTimeout(() => {
            this.player = Videojs(
                "custom-video",
                {
                    height: '266px',
                    width: '472px',
                    bigPlayButton: true,
                    textTrackDisplay: false,
                    errorDisplay: false,
                    controlBar: true,
                    muted: true,
                    type: "application/x-mpegURL",
                },
                function () {
                    this.play();
                }
            );
            this.player.src({src});
        }, 1000)
    }

    render() {
        return (
            <video
                id="custom-video"
                className="video-js"
                controls
                preload="auto"
                poster={this.props.poster}
            ></video>
        );
    }
}

export default VideoPlayer;
